<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="../css/bbs.css" rel="stylesheet">
</head>
<body>
<div class="bbs">
    <header><span onclick="fatie()">我要发帖</span></header>
    
    <section>
        <ul></ul>
    </section>
    
    <div class="post" id="post">
        <input class="title" placeholder="请输入标题（1-50个字符）" id="title">
        所属版块：<select><option>请选择版块</option><option value="电子书籍">电子书籍</option><option value="新课来了">新课来了</option><option value="新手报到">新手报到</option><option value="职业规划">职业规划</option></select>
        <textarea class="content"></textarea>
        <input class="btn" value="发布" onclick="fabu()">
    </div>
    
</div>
<script type="text/javascript">
	var tou=new Array("../images/tou01.jpg","../images/tou02.jpg","../images/tou03.jpg","../images/tou04.jpg");	
	function fatie(){
		document.getElementById("post").style.display="block";
	}
	function fabu(){
		var pic=Math.floor(Math.random()*4);
		var picpath=tou[pic];
		var liEle=document.createElement("li");
		var ulEle=document.getElementsByTagName("section")[0].firstElementChild;
		
		//图片
		var picEle=document.createElement("img");
		picEle.setAttribute("src",picpath);
		//标题
		var titleH1=document.createElement("h1");
		var title=document.getElementById("title").value;
		titleH1.innerHTML=title;
		//版块
		var span1=document.createElement("span");
		span1.innerHTML="版块："+document.getElementsByTagName("select")[0].value;
		//发布时间
		var time=new Date();
		var span2=document.createElement("span");
		span2.innerHTML="发表时间:"+time.getFullYear()+"-"+(time.getMonth()+1)+"-"+time.getDate()+" "+time.getHours()+":"+time.getMinutes();
		
		
		var divEle=document.createElement("div");
		liEle.appendChild(divEle);
		divEle.appendChild(picEle);
		liEle.appendChild(titleH1);
		var pEle=document.createElement("p");
		pEle.appendChild(span1);
		pEle.appendChild(span2);
		liEle.appendChild(pEle);					
		ulEle.insertBefore(liEle,ulEle.firstElementChild);
					
		document.getElementById("title").value=null;
		document.getElementsByTagName("select")[0].value=null;
		document.getElementsByTagName("textarea")[0].value=null;
		document.getElementById("post").style.display="none";
	}
	
</script>
</body>
</html>